import React from 'react';
import ReactDOM from 'react-dom';
import C1 from './components/child'
import C2 from './components/child2'


/* 
  forceUpdate  类似于 vue 的 $forceUpdate  强制组件更新的


*/
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "珠峰",
      age: 13
    }
  }
  // static getDerivedStateFromProps(props, state) {
  //   // 不常用 返回结果会合并到当前的state中
  //   return {
  //     qq: 666
  //   }
  // }
  // componentWillMount(){}
  // UNSAFE_componentWillMount(){}  类似于vue的beforeMount
  componentDidMount() {
    //  组件加载完成之后执行   mounted
  }
  // shouldComponentUpdate(新属性，新状态) {
  //   // 优化性的钩子函数
  //   // 控制当前组件是否能够更新的
  //   return false // 返回true能正常更新  返回false不能更新
  // }
  // componentDidUpdate(prevProps, prevState, snapshot) {   // vue的 updated
  //   // 如果我们 snapshot 有值，说明我们刚刚添加了新的 items，
  //   // 调整滚动位置使得这些新 items 不会将旧的 items 推出视图。
  //   //（这里的 snapshot 是 getSnapshotBeforeUpdate 的返回值）
  //   if (snapshot !== null) {
  //     const list = this.listRef.current;
  //     list.scrollTop = list.scrollHeight - snapshot;
  //   }
  // }
  componentWillUnmount() { // vue的 beforeDestory

  }
  render() {
    //  不要再这个函数中 做出发试图更新的操作
    let { name, age } = this.state;
    return <div className=''>
      <input type="text" value={name} onChange={e => this.setState({ name: e.target.value })} />
      <input type="text" value={age} onChange={e => this.setState({ age: e.target.value })} />
      {this.state.qq}

      <C1 t={name}></C1>
      <C2 t={age}></C2>
    </div>;
  }
}

ReactDOM.render(<App />, document.getElementById('root'))